<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="12" :lg="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-icon" style="background-color: rgba(24, 144, 255, 0.1); color: #1890ff;">
            <i class="el-icon-user"></i>
          </div>
          <div class="stat-info">
            <div class="stat-title">用户总数</div>
            <div class="stat-value">{{ stats.userCount }}</div>
            <div class="stat-desc">系统注册用户总数</div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="12" :lg="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-icon" style="background-color: rgba(82, 196, 26, 0.1); color: #52c41a;">
            <i class="el-icon-s-cooperation"></i>
          </div>
          <div class="stat-info">
            <div class="stat-title">社团总数</div>
            <div class="stat-value">{{ stats.clubCount }}</div>
            <div class="stat-desc">已注册社团总数</div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="12" :lg="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-icon" style="background-color: rgba(250, 173, 20, 0.1); color: #faad14;">
            <i class="el-icon-mobile-phone"></i>
          </div>
          <div class="stat-info">
            <div class="stat-title">注册学号号</div>
            <div class="stat-value">{{ stats.phoneCount }}</div>
            <div class="stat-desc">系统中注册的学号总数</div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="12" :lg="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-icon" style="background-color: rgba(245, 34, 45, 0.1); color: #f5222d;">
            <i class="el-icon-s-flag"></i>
          </div>
          <div class="stat-info">
            <div class="stat-title">活动总数</div>
            <div class="stat-value">{{ stats.activityCount }}</div>
            <div class="stat-desc">系统中活动的总数量</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

<!--    <el-row :gutter="20" style="margin-top: 20px">-->
<!--      <el-col :span="16">-->
<!--        <el-card shadow="hover">-->
<!--          <div slot="header">-->
<!--            <span>系统概览</span>-->
<!--          </div>-->
<!--          <el-table-->
<!--            :data="recentUsers"-->
<!--            stripe-->
<!--            style="width: 100%">-->
<!--            <el-table-column-->
<!--              prop="id"-->
<!--              label="ID"-->
<!--              width="80">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="nickname"-->
<!--              label="用户名"-->
<!--              width="120">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="phone"-->
<!--              label="手机号">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="createdAt"-->
<!--              label="注册时间">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="role"-->
<!--              label="角色">-->
<!--              <template slot-scope="scope">-->
<!--                <el-tag :type="getRoleType(scope.row.role)">{{ getRoleName(scope.row.role) }}</el-tag>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--          </el-table>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--      -->
<!--      <el-col :span="8">-->
<!--        <el-card shadow="hover">-->
<!--          <div slot="header">-->
<!--            <span>邀请码使用情况</span>-->
<!--          </div>-->
<!--          <div class="chart-container">-->
<!--            <div class="empty-chart" v-if="!chartData.length">-->
<!--              <i class="el-icon-data-analysis"></i>-->
<!--              <p>暂无数据</p>-->
<!--            </div>-->
<!--            &lt;!&ndash; 这里可以放置图表组件，比如ECharts &ndash;&gt;-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--    </el-row>-->
  </div>
</template>

<script>
import httpInstance from '@/utils/http';

export default {
  name: 'AdminDashboard',
  data() {
    return {
      stats: {
        userCount: 0,
        clubCount: 0,
        phoneCount: 0,
        activityCount: 0
      },
      recentUsers: [],
      chartData: []
    };
  },
  created() {
    this.fetchDashboardData();
  },
  methods: {
    // 获取仪表盘数据
    async fetchDashboardData() {
      // 获取 社团总数
      httpInstance({
        url: '/api/club/num',
        method:'get'
      }).then(res => {
        this.stats.clubCount = res.data
        console.log("clubCount = ", this.stats.clubCount);

      }).catch(err => {
          console.log(err);
      })
      // 获取 活动总数量
      httpInstance({
        url: '/api/activity/num',
        method:'get'
      }).then(res => {
        this.stats.activityCount = res.data
        console.log("activitCount = ", this.stats.activityCount);

      }).catch(err => {
        console.log(err);

      })
      // 获取注册手机号 的数目

      // 获取用户总数
      httpInstance({
        url: '/api/user/num',
        method:'get'
      }).then(res => {
        this.stats.userCount = res.data
        this.stats.phoneCount = res.data
        console.log("userCount = ", this.stats.userCount);
        console.log("phoneCount = ", this.stats.phoneCount);


      }).catch(err => {
        console.log(err);
      })

    },
    // 获取角色类型
    getRoleType(role) {
      const types = {
        1: '',        // 普通用户
        2: 'success', // 社联成员
        3: 'danger'   // 超级管理员
      };
      return types[role] || '';
    },
    // 获取角色名称
    getRoleName(role) {
      const names = {
        1: '普通用户',
        2: '社联成员',
        3: '超级管理员'
      };
      return names[role] || '未知角色';
    }
  }
};
</script>

<style scoped>
.dashboard {
  padding: 10px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
  height: 220px;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-right: 20px;
}

.stat-info {
  flex: 1;
}

.stat-title {
  font-size: 16px;
  color: #8c8c8c;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.stat-desc {
  font-size: 12px;
  color: #8c8c8c;
}

.chart-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-chart {
  text-align: center;
  color: #bfbfbf;
}

.empty-chart i {
  font-size: 48px;
  margin-bottom: 10px;
}
</style>
